<!--
 * @Description: OSPF 接口新建、编辑
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-10-12 16:06:01
 * @LastEditTime: 2021-11-01 19:50:26
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <div class="info">
      <h1 class="title">新建OSPF接口</h1>
      <!-- 新建OSPF -->
      <el-form
        ref="interForm"
        :model="form"
        :rules="rules"
        label-width="160px"
        label-position="right"
        class="form"
      >
        <el-form-item
          label="实例ID"
          prop="instanceId"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.instanceId" style="width:100%;">
              <el-option
                v-for="(item, index) in insDatas"
                :key="index"
                :value="item.instanceId"
                :label="item.instanceId"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          label="接口名称"
          prop="intfOid"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select
              v-model="form.intfOid"
              style="width:100%;"
              placeholder="请选择接口名称"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in intfOidList"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="接口优先级" prop="priority">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number :min="0" :max="255" v-model="form.priority" placeholder="范围：0-255"></el-input-number>
          </el-col>
        </el-form-item>
        <el-form-item label="网络类型" prop="networkType">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.networkType" style="width:100%;" placeholder="请选择网络类型">
              <el-option
                v-for="(item, index) in networkTypeList"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="认证" prop="authType">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.authType" style="width:100%;">
              <el-option
                v-for="(item, index) in interAuthList"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          label="接口认证密钥"
          prop="authKey"
          :rules="{ required: true,message: '请检查必填项！', trigger:'blur'}"
          v-if="form.authType === 'MD5' || form.authType === 'Simple'"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.authKey" placeholder="请输入1-31个字符"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item
          label="key-id"
          prop="md5KeyId"
          v-if="form.authType === 'MD5'"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number
              :min="1"
              :max="255"
              v-model="form.md5KeyId"
              placeholder="范围：1-255"
              :disabled="form.id ? true : false"
            ></el-input-number>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 90px" @click="cancel">返回</el-button>
          <el-button type="primary" style="width: 90px" @click="submitForm">创建</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    // 计算是否滚动到最下面
    'paging': {
      bind (el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTWRAP_DOM.addEventListener('scroll', function() {
          // scrollHeight 获取元素内容高度(只读)
          // scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
          // clientHeight 读取元素的可见高度(只读)
          // 如果元素滚动到底, 下面等式返回true, 没有则返回false:
          const condition = Math.round(this.scrollHeight - this.scrollTop) <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      }
    }
  },
  props: ['ne', 'insDatas'],
  data () {
    return {
      form: {
        instanceId: null,
        intfOid: null,
        bfd: false,
        priority: 0,
        intfCost: 1,
        transmitDelay: 1,
        retransmitInterval: 5,
        intfTime: 10,
        mtuIgnore: false,
        intfDeadVal: 40,
        FastFlood: false,
        resyncTimeoutEnable: true,
        resyncTimeout: 1,
        ttlEnable: true,
        ttl: 1,
        authType: 'NA',
        authKey: null,
        frr: false,
        frrIntfOid: null,
        networkType: null,
        md5KeyId: null
      },
      rules: {},
      interAuthList: [
        { value: 'NA', label: '不使能' },
        { value: 'Simple', label: 'Simple' },
        { value: 'MD5', label: 'MD5' },
      ],
      intfOidList: [],
      networkTypeList: [
        { value: 'Broadcast', label: '广播型多路访问网络' },
        { value: 'Non_Broadcast', label: '非广播型多路访问网络' },
        { value: 'Point_To_Point', label: '点到点网络' },
        { value: 'Point_To_Multipoint', label: '点到多点网络' }
      ],
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      // 是否可以进行分页
      filterText: ''
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.getInterName();
    });
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('handleDiag', 0);
    },
    // 提交
    submitForm () {
      let _this = this;
      _this.$refs['interForm'].validate(valid => {
        if (valid) {
          let params = {
            instanceId: _this.form.instanceId,
            intfOid: _this.form.intfOid,
            bfd: _this.form.bfd,
            priority: _this.form.priority > -1 ? _this.form.priority : -1,
            intfCost: _this.form.intfCost,
            transmitDelay: _this.form.transmitDelay,
            retransmitInterval: _this.form.retransmitInterval,
            intfTime: _this.form.intfTime,
            mtuIgnore: _this.form.mtuIgnore,
            intfDeadVal: _this.form.intfDeadVal,
            FastFlood: _this.form.FastFlood,
            resyncTimeout: _this.form.resyncTimeoutEnable ? _this.form.resyncTimeout : 0,
            ttl: _this.form.ttlEnable ? _this.form.ttl : 0,
            authType: _this.form.authType,
            authKey: _this.form.authKey,
            frr: _this.form.frr,
            frrIntfOid: _this.form.frrIntfOid,
            networkType: _this.form.networkType,
            md5KeyId: _this.form.md5KeyId
          };
          _this.$http.post({
            url: '/api/resource/nemng/command/' + _this.ne.id,
            data: {
              commandCode: 'l3proctocol.ospf.intf.set',
              paras: {
                adds: [params]
              }
            }
          }).then(res => {
            if (res) {
              _this.$parent.refresh();
              _this.$message.success('创建成功！');
              _this.cancel();
            }
          });
        } else {
          _this.$message.console.error('请检查必填项！');
        }
      });
    },
    // 获取接口名称
    getInterName () {
      let _this = this;
      _this.$http.post({
        url: '/api/resource/nemng/command/' + _this.ne.id,
        data: {
          commandCode: 'intfselector.get',
          paras: {
            use: 'EthIntf',
            limit: _this.page.pageSize,
            offset: (_this.page.page - 1) * _this.page.pageSize
          }
        }
      }).then(res => {
        if (res.objects.length > 0) {
          let list = [];
          if (_this.ne.neLayer === 'Mixed') {
            for (let i = 0; i < res.objects.length; i++) {
              list.push({
                value: res.objects[i].oid,
                label: res.objects[i].name,
                userlabel: res.objects[i].userlabel,
                slot: res.objects[i].slot,
                port: res.objects[i].port,
                type: res.objects[i].type,
                tpAttrs: res.objects[i].tpAttrs,
              });
            }
            _this.intfOidList = list;
          } else {
            let lans = _this.ne.extAttrs.site.lans;
            for (let i = 0; i < res.objects.length; i++) {
              for (let k = 0; k < lans.length; k++) {
                let name = Number(lans[k].name.split('/')[1]);
                if (name === res.objects[i].port) {
                  list.push({
                    value: res.objects[i].oid,
                    label: res.objects[i].name,
                    userlabel: res.objects[i].userlabel,
                    slot: res.objects[i].slot,
                    port: res.objects[i].port,
                    type: res.objects[i].type,
                    tpAttrs: res.objects[i].tpAttrs,
                  });
                }
              }
            }
            _this.intfOidList = list;
          }

        }
      });
    },
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 0px;
      box-sizing: border-box;
    }
  }
  ::v-deep .el-input-number {
    width: 235px;
  }
}
@media only screen and (max-width: $device-ipad) {
  .page-content {
    ::v-deep .el-input-number {
      width: 195px;
    }
  }
}
</style>